<script setup >
const tableData = ref([])

const  pageInfo = reactive({
  pageNo: 1,
  pageSize: 10
})
watch(() =>pageInfo.pageSize,(value,oldValue) =>{
  console.log('watch', value,oldValue)
  getData()
})
watch(() =>pageInfo.pageNo,(value,oldValue) =>{
  console.log('watch', value,oldValue)
  // getData()
})
function getData() {

}
async function goDetail(id) {
  await navigateTo({
    path: `/investors/news/${id}/detail`,
    // query: {
    //   id: id,
    // }
  })
}

definePageMeta({
  keepalive: true
})
</script>

<template>
  <div>
    <ul class="w-full overflow-hidden">
      <li @click="goDetail(i)" class="list-none flex list-item bg-white rounded-md mb-20px  w-full overflow-hidden"
          v-for="i in 3">
        <div class="left">
          <img src="/img/list-demo.png" quality="80" width="258" height="155"/>
        </div>
        <div class="right flex flex-col justify-between px-20px py-10px  overflow-hidden">
          <div class="title w-full ellipsis">
            科技日报》报道氢内燃机创新团队——顺着氢的“脾气科技日报》报道氢内燃机创新团队——顺着氢的“脾气
          </div>
          <div class="text mt-5px text-#666 ellipsis-2">
            北京理工大学于2006年建成了国内第一个氢内燃机综合开发试验平台北北京理工大学于2006年建成了国内第一个氢内燃机综合开发京理工大学于2006年建成了国内第一个氢内燃机综合开发试验平台
          </div>
          <div class="time flex  items-center text-#999">
            <svg-icon name="news-time" color="#666666" ></svg-icon>
            <span class="ml-10px text-14px text-#999">2023-01-01</span>
          </div>
        </div>
      </li>
    </ul>

    <div class="flex justify-center mt-40px">
      <el-pagination
        v-model:current-page="pageInfo.pageNo"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[10, 15]"
        @current-change="(pageNo) => {
          pageInfo.pageNo = pageNo
        }"
        @size-change="(pageSize) => {
          pageInfo.pageSize = pageSize
        }"
        background layout="sizes,prev,pager, next" :total="1000"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list-item {
  cursor: pointer;
  .right {
  }
}
</style>